<template>
  <div class="tabs">
    <div
      v-for="(item, index) in options"
      :key="index"
      class="tabs-item"
      :class="{ active: active === item[valueKey] }"
      @click="onChange(item[valueKey])"
    >
      {{ item[labelKey] }}
    </div>
  </div>
</template>
<script setup lang="jsx">
const active = defineModel({ type: [Number, String], default: '' })
defineOptions({ name: 'MyTabs' })
defineProps({
  options: {
    type: Array,
    default: () => [],
  },
  labelKey: {
    type: String,
    default: 'label',
  },
  valueKey: {
    type: String,
    default: 'value',
  },
})
function onChange(val) {
  active.value = val
}
</script>
<style lang="scss" scoped>
.tabs {
  display: flex;
  gap: 20px;
  .tabs-item {
    font-size: 16px;
    color: #686f7c;
    padding: 3px 4px;
    border-radius: 4px;
    font-weight: bolder;
    cursor: pointer;
    font-family: PingFangSC, PingFang SC;
    &:hover {
      color: #0a56d8;
      background: #f4f5f7;
    }
    &.active {
      color: #0a56d8;
    }
  }
}
</style>
